<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
      xmlns:friend="http://www.contact.core.friends.com/contacts/core/friends/ui"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:a4j="http://richfaces.org/a4j">
<ui:component>
    <style type="text/css">
        table.noborder td {
            border: 0px;
        }
    </style>
    <h:form>

        <rich:panel id="friendSearchPanel"
                    style="overflow:auto; width:100%; border:none; margin-top:40px"
                    bodyClass="rich-laguna-panel-no-header">

            <h:outputLabel style="color:black; font-size:12px;" value="#{friendBean.meniOptionDescribe} - ">
                <h:outputLabel style="color:blue; font-size:12px;"
                               value="#{friendBean.countOfMenuOptionViewResult} Result"/>
            </h:outputLabel>
            <rich:separator height="2px" width="100%" style="margin-bottom:10px;"/>
            <a4j:outputPanel rendered="#{empty friendBean.menuOptionViewResult}" layout="block"
                             style="text-align:center">
                <h:outputFormat value="[ #{resources.listAreEmptyText} ]">
                    <f:param value="#{friendBean.meniOptionDescribe}"/>
                </h:outputFormat>
            </a4j:outputPanel>
            <rich:dataTable rendered="#{not empty friendBean.menuOptionViewResult}"
                            id="allFriendSearchTable"
                            var="item"
                            value="#{friendBean.menuOptionViewResult}"
                            rows="10"
                            width="100%"
                            style="border:none; background:inherit"
                            styleClass="noborder">
                <rich:column
                        filterExpression="#{fn:containsIgnoreCase(item.firstName, friendBean.filterFriend) || fn:containsIgnoreCase(item.lastName, friendBean.filterFriend)}">
                    <friend:oneFriendRow friend="#{item}" reRender="allFriendSearchTable"/>

                    <!--<a4j:outputPanel layout="block" style="height:10px"/>-->
                </rich:column>
            </rich:dataTable>
            <rich:datascroller align="center"
                               for="allFriendSearchTable"
                               style="width:100%"
                               maxPages="100"
                               limitToList="true"
                               ajaxSingle="false"
                               renderIfSinglePage="false"
                               page="#{friendBean.scrollerPage}"
                               reRender="friendSearchPanel"/>


        </rich:panel>


    </h:form>


</ui:component>


</html>
